<template>
<div>
    <van-search v-model="searchValue" placeholder="搜索歌曲、歌手"  type="text" v-on:keyup.enter="enterSearchMember"/>
    <div>
      <ul>
        <li class="songlistitem" v-for="item in songData" :key="item.id" @click="selectPlayList(item)">
          <div class="songlistname">
              <span class="songname">{{item.name}}</span><br>
              <span  class="singername" v-for="singers in item.artists" :key="singers.id">{{singers.name}}</span>
          </div>
          <div>
              <span class="bofang"></span>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="hotserachisnot==true">
      <h6>热门搜索</h6>
      <ul class="hotwordlist">
        <li class="hotworditem" v-for="hotword in searchHotword" :key="hotword.id" @click="selectword(hotword)">
          <span class="hotwordtext">{{hotword.searchWord}}</span>
        </li>
      </ul>

    </div>
    <div class="mini-palyer-container" v-if="playsongname != ''">
      <img class="playicon" :src="songpicurl" alt="" />
      <div class="text" @click="selectMiniPlayer(selectid)">
        <span class="playertext-name">{{ playsongname }}</span>
        <span class="playertext-singer">{{ playsongsinger }}</span>
      </div>
      <!-- 播放图标 -->
      <div class="control">
        <audio :src="musicurl" @ended="overAudio" autoplay ref="audio"></audio>
        <div>
          <div class="play" v-if="isPlay">
            <i class="iconfont icon-bofang1"></i>
            <span @click="playAudio">Stop</span>
          </div>
          <div class="play" v-else>
            <i class="iconfont icon-zanting1" @click="pauseAudio"></i>
            <span @click="playAudio">Play</span>
          </div>
        </div>
      </div>
    </div>  
</div>
</template>
<script>
import axios from 'axios'
export default {
   data() {
    return {
      searchValue: '周杰伦',
      songData:[],
      songpicurl:"",
      musicurl:"",
      playsongname:"",
      playsongsinger:"",
      searchHotword:[],
      hotserachisnot:true,
      isPlay: false,
    };
  },
  created(){
    // this.getSearchData();
    //键盘回车事件
    var that = this;
    document.onkeydown = function() {
    var key = window.event.keyCode;
    if (key == 13) {
    that.enterSearchMember();
    }
    }
    //搜索热词榜
    this.getHotSearchword();
  },
  methods:{
  getSearchData(){
    axios.get("http://171.220.242.237:3001/search?keywords="+this.searchValue)
    .then(res => {
      console.log(res.data)
      this.songData = res.data.result.songs
    })
    .catch(err => {
      console.error(err); 
    })
  },
  enterSearchMember(){
    this.getSearchData();
  },  
  selectPlayList(item) {
      console.log("before----------------" + this.isPlay);
      this.isPlay = true;
      console.log("after----------------" + this.isPlay);
      const id = item.id;
      this.selectid = item.id;
      this.playsongname = item.name;
      this.playsongsinger = item.artists[0].name;
      // console.log("---------"+this.playsongname)
      //点击歌曲列表，获得歌曲的ID然后通过ID拿到点击歌曲的URL地址
      axios
        .get("http://171.220.242.237:3001/song/url", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          // console.log(res.data.data);
          this.musicurl = res.data.data[0].url;
          // console.log(res.data.data[0].url)
        })
        .catch((err) => {
          console.error(err);
        });
      //点击歌曲列表，获得歌曲的ID然后通过ID拿到点击歌曲的图片URL地址
      axios
        .get("http://171.220.242.237:3001/song/detail", {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.songpicurl = res.data.songs[0].al.picUrl;
        });
    },
    //播放
    playAudio() {
      // let audio = this.audio = document.getElementById('audio')
      let audio = this.$refs.audio;
      //   let audio = this.$refs.audio;
      console.log("time---------" + audio.currentTime);
      if (audio.paused) {
        audio.play();
        this.isPlay = true;
      } else {
        audio.pause();
        this.isPlay = false;
      }
      console.log("-------------------------");
    },
    //暂停音频
    pauseAudio() {
      this.audioPlayShow = true;
      let audio = document.getElementById("audio");
      audio.pause();
      // 清除定时器
      // clearInterval(this.audioInterval)
    },
    //音频播放完的时候
    overAudio() {
      this.audioWidth = this.$refs.line.offsetWidth;
      this.audioIsOver = true;
      this.pauseAudio();
    },
  //获取热搜词
  getHotSearchword(){
    axios.get("http://171.220.242.237:3001/search/hot/detail")
    .then(res => {
      console.log(res.data.data)
      this.searchHotword=res.data.data
    })
    .catch(err => {
      console.error(err); 
    })
  },
  selectword(hotword){
    this.searchValue=hotword.searchWord
    this.getSearchData();
    this.hotserachisnot=false;
  },
        },
}
</script>
<style scoped>
.hotwordtext{
  font-size: 10px;
}
.hotworditem{
  float: left;
  width: 100px;
  border: #e7998e 0.2px solid;
  border-radius:5px;
  display: block;
  margin: 5px;
}
.hotwordlist{
  width: 500px;
  margin-left: 5%;
}
.text{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  overflow: hidden;
}
.playertext-name{
    margin-bottom: 2px;
    font-size: 17px;
    color: rgb(7, 14, 121);
}
.playertext-singer{
    font-size: 15px;
    color: rgb(139, 139, 184);
}

.playicon{
    margin-left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.control{
  flex: 0 0 30px;
  padding: 0 10px;
  color: #d44439;
  margin-right: 30px;
}
.mini-palyer-container{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: rgb(136, 96, 96);
  border-radius: 10px;
  /* padding: 5px; */
}


.bofang{
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) repeat;
  background-size: 166px 97px;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-position: -24px 0;
  text-align: right;
  margin-right: 20px;
  
}
.songlistitem{
  width: 100%;
  display: flex;
}
.songlistname{
    padding: 0 0 0 10px;
    text-align: left;
    margin-bottom: 10px;
    border-bottom: rgb(231, 225, 225) 0.1px solid;
    width: 100%;
    margin-left: 10px;
    /* display: flex; */
}
.songname{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif,STHeiTi;
    line-height: 1.5;
    color: #507daf;
}
.singername{
    font-size: 12px;
    color: #888;
    font-family: Arial, Helvetica, sans-serif;
}
</style>